<template>
  <div>
    <table border="1" cellspacing="0">
      <tr>
        <td>书名</td>
        <td>价格</td>
        <td>作者名</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in bookslist">
        <td>{{i.bookname}}</td>
        <td>{{i.price}}</td>
        <td v-for="a in author" v-if="a.id===i.author">{{a.authorname}}</td>
        <td>
          <button @click="deletec(i.id)">删除</button>
          <router-link :to="{name:'UPD',params:{'id':i.id}}"><button>修改</button></router-link>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "Showbooks",
    data: function () {
      return {
        bookslist: [],
        author: []
      }
    },
    mounted() {
      axios({
        url: 'http://localhost:8000/myapp/show/',
        method: 'get'
      }).then(res => {
        console.log(res.data);
        this.bookslist = res.data.booksdata;
        this.author = res.data.authorsdata;
      })
    },
    methods: {
      deletec(cc) {
        axios({
          url: `http://localhost:8000/myapp/delbook/${cc}`,
          method: 'get'
        }).then(res => {
          console.log(res.data);
          window.location.reload()
        })
      }
    }
  }
</script>

<style scoped>

</style>
